<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style type="text/css">
        .a1{background-color:darkcyan ;
            color: white;
            height: 50px;
            font-size: 15px;

            padding-top: 13px;
            padding-left: 20px;
        }
        a{
            text-decoration:none;
            color:white;
            text-decoration: none;
        }
        .a2{
            width: 800px;
            height:430px;
            background-color: #f8f8f8;
            margin: 40px auto;
            border-radius: 20px;
            text-align: center;
            padding-top: 40px;
            color: #008B8B;
            font-size: 25px;
        }
        .a3{
            background-color:darkcyan ;
            color: white;
            height: 70px;
            font-size: 15px;
            text-align: center;
            padding-top: 25px;
        }
    </style>
    <div id="app">
        <div class="a1">
            <a href="/ssm/index.html">
                < 返回
            </a>
        </div>
        <img src="https://www.gdghospital.org.cn/uploadfiles/banner/20210806155602465.jpg" style="height: 280px; width: 1700px;"/>
        <div class="a2" >
            <strong >建议意见登记表</strong>
            <el-form :model="obtain" :rules="rules" ref="obtain"
                     class="demo-form-inline" style="width: 500px; margin: 20px auto; height: 50px;">

                <el-form-item  prop="telephone">
                    <el-input placeholder="请输入联系方式" v-model="obtain.telephone" oninput="value=value.replace(/^[1]([3-9])[0-9]{9}$/,'')"></el-input>
                </el-form-item>
                <el-input
                        prop="content"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入内容"
                        v-model="obtain.content">
                </el-input>
                <!--<el-date-picker-->
                        <!--v-model="obtain.time"-->
                        <!--type="date"-->
                        <!--placeholder="选择日期"-->
                        <!--format="yyyy 年 MM 月 dd 日"-->
                        <!--value-format="yyyy-MM-dd">-->
                <!--</el-date-picker>-->

                <el-form-item>
                    <el-button style="height: 50px; width: 200px; background-color: #008b8b;margin-top: 20px;"
                               type="primary" @click="add()">提交</el-button>
                </el-form-item>
            </el-form>
        </div>


        <div class="a3">
            <a href="">网站地图</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">法律声明</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">友情链接</a>
            @2015 Baidu <a href=""><font color="white"></font>使用必读意见反馈 ;京ICP证030173号</a>
        </div>
    </div>
</head>
<body>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            obtain:{},
            rules:{
                telephone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    {min: 11, max: 12, message: '长度为11位', trigger: 'blur'}
                ],
                content: [
                    { required: true, message: '请填写内容', trigger: 'blur' }
                ]
            }
        },
        methods:{
            goBack(){
                window.location.href="index.html";
            },
            add() {
                haha.$refs["obtain"].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/opinion/send",haha.obtain,function (backData) {
                            haha.$message.success('反馈成功 感谢您的意见');
                            haha.$refs["obtain"].resetFields();
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>
